<script setup lang="tsx">
import { ref } from 'vue';
import Modal from '@/components/common/modal.vue';
import { useAntdForm, useFormRules } from '@/hooks/common/form';

interface Emits {
  (e: 'search', model: MenuPageListApi.MenuTableListParams): void;
  (e: 'handleReturnPIN');
}

const emit = defineEmits<Emits>();

const model = defineModel<any>('model', { required: true });

function search() {
  emit('search', model.value);
}

function reset() {
  model.value = {
    materiel: '',
    status: ''
  };
  emit('search', model.value);
}

interface OpenModel {
  eqpPositionList: null;
}

const openType = ref(0);
const visible = ref(false);
const openModel = ref({
  eqpPositionList: []
});
const { createRequiredRule } = useFormRules();
const { formRef, validate, resetFields } = useAntdForm();
type RuleKey = Extract<keyof OpenModel, 'eqpPositionList'>;

const rules: Record<RuleKey, App.Global.FormRule> = {
  eqpPositionList: createRequiredRule('不能为空')
};
function openModal(type: 0 | 1) {
  openType.value = type;
  visible.value = true;
}

async function handleOk() {
  await validate();
  console.log('openModel.value :>> ', openModel.value);
}

function handleClose() {
  openModel.value.upPinList = null;
}

function handleReturnPIN() {
  emit('handleReturnPIN');
}
</script>

<template>
  <ACard :title="null" :bordered="false" class="search-card card-wrapper">
    <AForm
      ref="formRef"
      :model="model"
      :label-col="{
        span: 5,
        md: 7
      }"
      class="search-form"
    >
      <div class="w-full flex">
        <ARow :gutter="[15, 8]" wrap class="w-full">
          <ACol :span="24" :md="12" :lg="6" :xl="6" :xxl="6">
            <AFormItem label="料号" name="materiel" class="m-0" :label-col="{}">
              <AInput
                v-model:value="model.materiel"
                placeholder="请输入料号"
                class="min-form-control"
                allow-clear
                autocomplete="off"
                @keypress.enter="search"
              />
            </AFormItem>
          </ACol>
          <div class="flex">
            <AFormItem class="m-0">
              <div class="w-full flex-y-center justify-end gap-12px">
                <AButton type="primary" ghost class="mini-btn" @click="search">
                  <template #icon>
                    <icon-ic-round-search class="align-sub text-icon" />
                  </template>
                  <span class="ml-3px">{{ $t('common.search') }}</span>
                </AButton>
                <AButton class="mini-btn" @click="reset">
                  <template #icon>
                    <icon-ic-round-refresh class="align-sub text-icon" />
                  </template>
                  <span class="ml-3px">{{ $t('common.reset') }}</span>
                </AButton>
                <AButton type="primary" ghost class="mini-btn" @click="handleReturnPIN">
                  <span class="ml-3px">一键退PIN</span>
                </AButton>
              </div>
            </AFormItem>
          </div>
        </ARow>
      </div>
    </AForm>

    <Modal
      v-model:visible="visible"
      :title="openType == 0 ? '批量退PIN取料' : '批量反空托'"
      width="500px"
      height="193px"
      destroy-on-close
      @ok="handleOk"
      @close="handleClose"
    >
      <AForm ref="formRef" :model="openModel" :rules="rules" class="search-form">
        <AFormItem label="工位位置" name="upPinList" class="m-0" :label-col="{}">
          <!-- <AInput v-model:value="openModel.upPinList" placeholder="请选择工位位置" allow-clear autocomplete="off" /> -->
          <ASelect v-model:value="openModel.upPinList" placeholder="请选择工位位置" mode="multiple" allow-clear>
            <!-- <a-select-option key="" value=""></a-select-option> -->
          </ASelect>
        </AFormItem>
      </AForm>
    </Modal>
  </ACard>
</template>

<style></style>
